<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <style>
    .avatar {
      border: 5px solid rebeccapurple;
      border-radius: 50%;
    }
  </style>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const a = {
        name: "Lex",
        image: "../src/assets/image/0ae88bea-81ef-4b6b-a34e-a6c4b9f45412.jpg",
      };
      function MyApp() {
        return (
          <>
            <h1>Hello, world!</h1>
            <img
              className="avatar"
              src={a.image}
              alt={a.name}
              style={{ width: 100, height: 100 }}
            />
          </>
        );
      }

      const container = document.getElementById("root");
      const root = ReactDOM.createRoot(container);
      root.render(
        <section>
          <MyApp />
        </section>
      );
    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this page for starting a new React project with JSX:
      https://react.dev/learn/start-a-new-react-project

      Read this page for adding React with JSX to an existing project:
      https://react.dev/learn/add-react-to-an-existing-project
    -->
  </body>
</html>
